<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AES加密调试测试</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
        .container { max-width: 1000px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; }
        .test-section { margin: 20px 0; padding: 20px; border: 2px solid #ddd; border-radius: 8px; }
        .test-section h3 { color: #333; margin-bottom: 15px; }
        textarea { width: 100%; height: 100px; margin: 10px 0; padding: 10px; border: 1px solid #ccc; }
        input[type="text"] { width: 100%; padding: 8px; margin: 5px 0; border: 1px solid #ccc; }
        button { padding: 10px 20px; margin: 5px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; }
        button:hover { background: #45a049; }
        .result { margin: 10px 0; padding: 10px; background: #f9f9f9; border-left: 4px solid #4CAF50; }
        .error { border-left-color: #f44336; background: #ffebee; }
        .success { border-left-color: #4CAF50; background: #e8f5e9; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 AES加密解密调试测试</h1>
        
        <div class="test-section">
            <h3>📋 配置信息</h3>
            <label>AES密钥 (32字节):</label>
            <input type="text" id="aesKey" value="feihe2024reservation123456789012" placeholder="32位密钥">
            <label>测试数据:</label>
            <input type="text" id="testData" value='{"test": "hello world"}' placeholder="测试JSON数据">
        </div>

        <div class="test-section">
            <h3>🎯 方法1: crypto-js 默认方式 (之前的错误方式)</h3>
            <button onclick="testMethod1()">测试加密解密</button>
            <div id="method1Result" class="result"></div>
            <label>加密结果:</label>
            <textarea id="method1Encrypted" readonly></textarea>
        </div>

        <div class="test-section">
            <h3>🎯 方法2: ECB模式 (正确方式)</h3>
            <button onclick="testMethod2()">测试加密解密</button>
            <div id="method2Result" class="result"></div>
            <label>加密结果:</label>
            <textarea id="method2Encrypted" readonly></textarea>
        </div>

        <div class="test-section">
            <h3>🌐 后端兼容性测试</h3>
            <button onclick="testBackendCompatibility()">测试后端解密</button>
            <div id="backendResult" class="result"></div>
        </div>
    </div>

    <script>
        // 方法1: crypto-js默认方式 (错误的方式)
        function testMethod1() {
            const key = document.getElementById('aesKey').value;
            const data = document.getElementById('testData').value;
            const resultDiv = document.getElementById('method1Result');
            
            try {
                // crypto-js默认使用AES-256-CBC，会自动生成salt和IV
                const encrypted = CryptoJS.AES.encrypt(data, key).toString();
                document.getElementById('method1Encrypted').value = encrypted;
                
                // 解密测试
                const decrypted = CryptoJS.AES.decrypt(encrypted, key).toString(CryptoJS.enc.Utf8);
                
                if (decrypted === data) {
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = `✅ 前端自测成功，但与后端不兼容！<br>
                        原文: ${data}<br>
                        密文: ${encrypted}<br>
                        解密: ${decrypted}<br>
                        <strong>❌ 这种方式后端无法解密</strong>`;
                } else {
                    throw new Error('解密结果不匹配');
                }
            } catch (e) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `❌ 失败: ${e.message}`;
            }
        }

        // 方法2: ECB模式 (正确的方式)
        function testMethod2() {
            const key = document.getElementById('aesKey').value;
            const data = document.getElementById('testData').value;
            const resultDiv = document.getElementById('method2Result');
            
            try {
                // 使用ECB模式，与Java后端匹配
                const keyBytes = CryptoJS.enc.Utf8.parse(key);
                const encrypted = CryptoJS.AES.encrypt(data, keyBytes, {
                    mode: CryptoJS.mode.ECB,
                    padding: CryptoJS.pad.Pkcs7
                }).toString();
                
                document.getElementById('method2Encrypted').value = encrypted;
                
                // 解密测试
                const decrypted = CryptoJS.AES.decrypt(encrypted, keyBytes, {
                    mode: CryptoJS.mode.ECB,
                    padding: CryptoJS.pad.Pkcs7
                }).toString(CryptoJS.enc.Utf8);
                
                if (decrypted === data) {
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = `✅ 成功！完全兼容！<br>
                        原文: ${data}<br>
                        密文: ${encrypted}<br>
                        解密: ${decrypted}<br>
                        <strong>✨ 这种方式与Java后端完全兼容</strong>`;
                } else {
                    throw new Error('解密结果不匹配');
                }
            } catch (e) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `❌ 失败: ${e.message}`;
            }
        }

        // 测试与后端的兼容性
        async function testBackendCompatibility() {
            const key = document.getElementById('aesKey').value;
            const data = document.getElementById('testData').value;
            const resultDiv = document.getElementById('backendResult');
            
            try {
                // 使用ECB模式加密
                const keyBytes = CryptoJS.enc.Utf8.parse(key);
                const encrypted = CryptoJS.AES.encrypt(data, keyBytes, {
                    mode: CryptoJS.mode.ECB,
                    padding: CryptoJS.pad.Pkcs7
                }).toString();
                
                // 调用后端测试接口
                const response = await fetch('/feihe/test_encryption', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        encrypted: encrypted
                    })
                });
                
                const result = await response.json();
                
                if (result.code === 0) {
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = `✅ 后端兼容性测试成功！<br>
                        发送的加密数据: ${encrypted}<br>
                        后端解密结果: ${JSON.stringify(result.data)}<br>
                        <strong>🎉 前后端加密解密完全兼容！</strong>`;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = `❌ 后端测试失败: ${result.msg}`;
                }
            } catch (e) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `❌ 请求失败: ${e.message}`;
            }
        }

        // 页面加载时自动测试方法2
        window.onload = function() {
            console.log('AES调试页面已加载');
            setTimeout(() => {
                testMethod2();
            }, 1000);
        };
    </script>
</body>
</html> 